// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.supporter-eyecatch {
  .at2x-simple("~@images/layout/supporter/banner-bg.jpg");
  background-size: cover;
  width: auto;
  height: 480px;
  background-position: center;
  padding: 30px;
  position: relative;

  &::before {
    content: "";
    .full-size();
    background: linear-gradient(
      to bottom,
      hsla(var(--hsl-b5), 1) 4%,
      hsla(var(--hsl-b5), 0) 100%
    );
  }

  &::after {
    content: "";
    .full-size();
    .at2x-simple("~@images/layout/supporter/banner-fg.png");
    background-size: cover;
    background-position: center;
    pointer-events: none;
  }

  &__box {
    background: @osu-colour-b4;
    width: 350px;
    padding: 50px;
    text-align: center;
    height: 100%;
    margin: 10px 0;
    border-radius: 15px;
    position: relative;

    @media @mobile {
      z-index: 1;
      background: hsla(var(--hsl-b4), 0.9);
      width: 100%;
    }
  }

  &__link {
    .link-plain();
  }

  &__text {
    font-size: @font-size--title-small-3;
    color: @osu-colour-l1;
    margin: 10px 0 0;

    &--main {
      font-size: 26px;
      font-weight: normal;

      @media @desktop {
        margin-top: 40px;
      }
    }

    &--sub-1 {
      margin-top: 0;
      color: @osu-colour-f1;
    }

    &--sub-2 {
      margin-top: 40px;
    }
  }
}
